<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>万羽球费计算</title>
    <style>
        .table {
            font-size: 14px;
            color: #7B7A7A;
        }

        .table td {
            height: 20px;
        }
    </style>
    <script>
        function CostCalculation() {
            var C = document.getElementById("C").value;//场地数量
            var Q = document.getElementById("Q").value;//用球数量
            var T = (C * 170) + (Q * 14);//消费总额
            document.getElementById('T').innerText = T;
            var Mn = document.getElementById("Mn").value;//男生人数
            var Wn = document.getElementById("Wn").value;//女生人数
            var MM;//男生个人应收
            var WM;//女生个人应收
            MM = T / (parseFloat(Mn) + Wn * 0.9);
            WM = parseFloat(MM * 0.9);
            document.getElementById('MM').innerText = MM.toFixed(2);
            document.getElementById('ZMM').innerText = (MM.toFixed(2) * Mn).toFixed(2);
            document.getElementById('WM').innerText = WM.toFixed(2);
            document.getElementById('ZWM').innerText = (WM.toFixed(2) * Wn).toFixed(2);
        }
    </script>
</head>
<body>
<table class="table">
    <tr>
        <td>场地数量：</td>
        <td><input type="text" id="C" value="4"></td>
    </tr>
    <tr>
        <td>用球数量：</td>
        <td><input type="text" id="Q" value=""></td>
    </tr>
    <tr>
        <td>消费总额：</td>
        <td><font id="T"></font></td>
    </tr>
    <tr>
        <td>男生人数：</td>
        <td><input type="text" id="Mn" value=""></td>
    </tr>
    <tr>
        <td>女生人数：</td>
        <td><input type="text" id="Wn" value=""></td>
    </tr>
    <tr>
        <td>男生应收：</td>
        <td>[人:<font id="MM"></font>] / [总:<font id="ZMM"></font>]</td>
    </tr>
    <tr>
        <td>女生应收：</td>
        <td>[人:<font id="WM"></font>] / [总:<font id="ZWM"></font>]</td>
    </tr>
    <tr>
        <td>
            <button type="button" onclick="CostCalculation()">计算</button>
        </td>
        <td></td>
    </tr>

</table>
</body>
</html>